<template>
  <span>
    <span :class="className" @click="getFamilys">
      <a href="javascript:;">
        <span class="f20">{{person.personName}}</span> &nbsp;&nbsp;
        <i class="iconfont icon-5176"></i> 
        选择家庭成员
        </a>
    </span>
    <el-dialog :visible.sync="dialogVisiable" custom-class="dialog-common">
      <div class="dialog-title" slot="title">
        请选择家庭成员
      </div>
      <div class="re">
        <div class="select-family-top">
          <i class="iconfont icon-jia"></i>
          <router-link to="/personal/family">添加家庭成员</router-link>
        </div>
        <ul class="select-family-member">
          <li v-for="(f, i) in familys" :key="f.id" @click="selectPerson(f)">
            <el-radio v-model="familyRadio" :label="i">
              {{f.personName}}
              <small class="t3">
                （{{FAMILY_RALATION[f.relation]}}）
              </small>
            </el-radio>
          </li>
        </ul>
      </div>
      <div class="center" style="margin-top:50px;">
        <a href="javascript:;" class="common-main-button" @click="confirmSelect">确定</a>
        <a href="javascript:;" class="common-sub-button" @click="dialogVisiable = false">取消</a>
      </div>
    </el-dialog>
  </span>
</template>

<script>
import { commonAjax, PLATFORM_PREFIX, FAMILY_RALATION } from '../api/api'

export default {
  props: ['className'],
  data () {
    return {
      familys: [],
      person: JSON.parse(localStorage.familyPerson || '{}'),
      familyRadio: 0,
      dialogVisiable: false,
      FAMILY_RALATION: FAMILY_RALATION,
      tempPerson: {}
    }
  },
  methods: {
    selectPerson (f) {
      this.tempPerson = f
      this.$emit('liclick', f)
    },
    confirmSelect () {
      if (this.tempPerson.mpiId) {
        this.person = this.tempPerson
        localStorage.familyPerson = JSON.stringify(this.tempPerson)
        this.$emit('btnclick', this.tempPerson)
      }
      this.dialogVisiable = false
    },
    getFamilys () {
      this.$store.commit('UPDATE_LOADING')
      commonAjax([true], `${PLATFORM_PREFIX}.familyService`, 'getFamilyMemberList').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          this.dialogVisiable = true
          this.familys = res.data.body || []
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      }).catch(res => {
        this.$store.commit('UPDATE_LOADING')
        this.$message({
          message: '请求服务器失败',
          type: 'error'
        })
      })
    }
  }
}
</script>
